<template>
  <div class="view-resource">
    <div class="view-list" v-for="(item, index) in listKey" :key="index">
      <div class="key" :style="getStyle(index)">{{item.label}}</div>
      <div class="value" :style="getStyle(index)">{{form[item.name]}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'viewButton',
    props: {
      form: {
        type: Object,
        default: function () {
          return {
            sort: -1,
            name: '',
            code: '',
            url: '',
            picUrl: '',
            type: '',
            des: '',
            pid: ''
          }
        }
      }
    },
    data () {
      return {
        listKey: [
          {
            name: 'name',
            label: '按钮名称'
          },
          {
            name: 'code',
            label: '按钮编码'
          },
          {
            name: 'des',
            label: '按钮描述'
          }
        ]
      }
    },
    methods: {
      getStyle (index) {
        if (index % 2 === 0) {
          return `background: #f9f9f9`
        }
        return `background: #fff`
      }
    }
  }
</script>

<style lang="scss" scoped>
  .view-resource {
    width: 660px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    .view-list {
      height: 39px;
      line-height: 39px;
      color: #444;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      color: #666;
      font-size: 14px;
      .key {
        width: 150px;
        margin-right: 10px;
        padding-left: 30px;
      }
      .value {
        width: 500px;
        padding-left: 30px;
      }
    }
  }
</style>
